<template>
  <div class="pc-header">
    <div class="header">
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <div class="logo">
            <img src="/static/images_pc/site/logo_white.png" alt="">
          </div>
          <div class="site-name" :class="showSites ? 'on' : ''">
            <span @click.stop="showSites = !showSites">
              <em>{{site}}优采</em><i class="el-icon-arrow-down c-main"></i>
            </span>

            <div class="site-list" @click.stop="showSites = true">
              <el-row class="clearfix" tag="ul">
                <el-col 
                  tag="li" 
                  v-for="(val, key) in cityList" 
                  :key="key"
                >
                  <label 
                    :class="key == cityCode && 'on'" 
                    :code="key"
                    @click="changeCity(key)"
                  >{{val}}</label>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="14" class="clearfix">
          <el-row type="flex" justify="end" class="header-right-menus">
            <!-- <el-col :span="4">
              <el-dropdown>
                <i class="ucai-icon ucai-icon-shouji1"></i>下载手机端
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><img src="" alt=""></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="4">
              <el-dropdown>
                <i class="ucai-icon ucai-icon-weixin-copy"></i>关注优采
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><img src="" alt=""></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="4">
              <el-dropdown>
                <i class="ucai-icon ucai-icon-kefu"></i>联系客服
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item><img :src="service_qrcode" alt=""></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="2" @click.native="toPage">
              <el-badge :value="unread_msg" :max="99" class="cu-p" >
                <i class="ucai-icon ucai-icon-tongzhi1"></i>消息
              </el-badge>
            </el-col> -->
            <el-col :span="6">
              <el-dropdown @command="handleCommand">
                <span class="cu-p">
                  {{username}}，欢迎您！
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="forgetPwd">修改密码</el-dropdown-item>
                  <el-dropdown-item command="layout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Badge,
  MessageBox,
} from "element-ui"

import { sign_out } from "@/api/modules/user"
import { setSignOut, getUserData } from '@utils/storage_base_config';
import { getLatestCity, setLatestCity, getConfig } from '@/api/modules/index'
import { getMsgUnreadNum } from '@/api/modules/message';

	import { BIZ_NAME, DEF_PROVINCE_ID, DEF_CITY_ID } from '@utils/default_config';
	import SITE_AREA_LIST from '@data/site-area';
export default {
  name: 'pc-header',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Badge.name]: Badge,
  },
  data() {
    return {
      account: null,
      unread_msg: '',
      city: '',
      cityCode: '',
      showSites: false,
      username: '',
      service_qrcode: ''
    }
  },
  computed: {
    provinceCode () {
      return DEF_PROVINCE_ID
    },
    cityList() {
      let city_list = {}
      const citys = SITE_AREA_LIST.city_list
      for(let city in citys){
        if(city.slice(0, 2) === this.provinceCode.slice(0, 2) ){
          city_list[city] = citys[city]
        }
      }
      return city_list
    },
    site() {
      return this.city.replace(/市|地区/, '')
    }
  },
  watch: {
    cityCode(nw) {
        localStorage.setItem('latest_city_code', nw)
        this.setLatest()
    }
  },
  created() {
    this.getLatest()
    this.getService()
    this.getUnreadMsg()
    this.getMemberInfo()
  },
  mounted () {
    document.addEventListener('click', this.handleBodyClick)
  },
  destroyed () {
    document.removeEventListener('click', this.handleBodyClick)
  },
  methods: {
    // 获取最后一次使用的城市
    getLatest() {
      getLatestCity().then(res => {
        let zone_id = res.data.zone_id
        if(!SITE_AREA_LIST.city_list[zone_id])
          zone_id = DEF_CITY_ID
        this.city = SITE_AREA_LIST.city_list[zone_id]
        this.cityCode = zone_id
      })
    },
    // 设置最后一次使用的城市
    setLatest() {
      setLatestCity(this.cityCode).then(res => {
        if(this.showSites){ // 弹窗出现，才会刷新
          this.showSites = false 
          window.location.reload()
        }
      })
    },
    // 选中城市
    changeCity(key) {
      this.city = this.cityList[key]
      this.cityCode = key
    },
    handleBodyClick(e){
      this.showSites = false
    },
    // 获取用户信息
    getMemberInfo() {
      getUserData()
       .then(userData => {
          this.username = userData.realname|| userData.phone
        })
    },
    handleCommand(command) {
      if(command === 'layout'){
        this.layout()
      }else {
        this.$goPage('pc/forgetPwd')
      }
    },
    // 获取未读消息数量
    getUnreadMsg() {
      getMsgUnreadNum().then(res => {
        if(Number(res.data.total) > 0){
          this.unread_msg = String(res.data.total)
        }
      })
    },
    // 获取全站客服
    getService () {
			getConfig(['customer_service', 'customer_wechat'])
				.then(res => {
					let service = {}
					const customer_service = res.data.customer_service,
								customer_wechat = res.data.customer_wechat
					if(customer_service){
						for(let i in customer_service){
							service[i] = customer_service[i]
						}
					}
					if(customer_wechat){
						for(let i in customer_wechat){
							service[i] = customer_wechat[i]
						}
          }
          this.service_qrcode = service.qr
				})
    },
    toPage() {
      sessionStorage.removeItem('side_mark',)
      this.$goPage('pc/message')
    },
    // 推出
    layout() {
      MessageBox.confirm('确定退出？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true}
      )
      .then(() => {
        sign_out().then(res => {
          setSignOut()
          setTimeout(() => {
            this.$goPage('pc/login', {
              role: '1',  // pc登录，固定分销商角色
            })
          }, 100)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@style_pc/basic/utils/index";
.cu-p {
  cursor: pointer;
}
.pc-header {
  height: 50px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1320px;
  z-index: 100;
  height: 50px;
  background: @white;
  box-shadow: 2px 2px 2px #F1F1F1;
}
.logo {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  height: 50px;
  background: #378bf2;
  text-align: center;
}
.site-name {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  color: #2c3b48;
  padding: 0 40px 0 20px;
  margin-left: 5px;
  cursor: pointer;
  border-width: 0 1px;
  border-style: solid;
  border-color: @white;
  & > span{
    line-height: 50px;
  }
  &.on {
    
    border-color: @border-color;
    box-shadow: -2px 2px 5px 1px rgba(0, 0, 0, 0.1);
     &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 4px;
      background: @white;
      z-index: 13;
    }
    .site-list{
      display: block;
    }
  }
  i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .site-list {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    padding: 10px;
    width: 517px;
    border: @border-default;
    box-shadow: -2px 2px 5px 1px rgba(0, 0, 0, 0.1);
    z-index: 12;
    background-color: @white;
    font-size: 12px;
    li {
      padding: 5px;
      display: inline-block;
      width: auto;
      label{
        display: inline-block;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: @border-default;
        cursor: pointer;
        &.on{
          border-color: @color-main;
          color: @color-main;
        }
      }
    }
  }
}

.header-right-menus {
  line-height: 50px;
  .ucai-icon {
    font-size: 18px;
    margin-right: 5px;
  }
  /deep/.el-badge__content {
    top: 10px;
  }
}
</style>